<template>
  <el-container>
    <el-aside width="10%"></el-aside>
    <el-main>
      <el-row :gutter="25">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div style="display: flex;justify-content: center;">
                <el-image
                    :src="authorinfo.avatarurl"
                    :fit="'fill'"
                />
              </div>
            </template>
            <div style="display: flex;justify-content: center;">
              <span>{{authorinfo.nickname}}</span>
            </div>
            <template #footer>
              <div style="display: flex;justify-content: center;">
                <!--                <el-button type="primary" round>更换头像</el-button>-->
                <span>{{authorinfo.signature}}</span>
              </div>
            </template>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card>
            <el-tabs type="border-card" v-model="activeName" @tab-change="handleTabChange">
              <el-tab-pane label="用户信息" name="user">
                <span style="font-size: 25px;">用户信息</span>
                <el-divider />
                <el-form v-model="authorinfo" label-position="left" label-width="auto">
                  <el-form-item label="用户名">
                    <el-input v-model="authorinfo.username" disabled/>
                  </el-form-item>
                  <el-form-item label="昵称">
                    <el-input v-model="authorinfo.nickname" disabled/>
                  </el-form-item>
                  <el-form-item label="个性签名">
                    <el-input v-model="authorinfo.signature"
                              type="textarea"
                              :rows="3"
                              :maxlength="150"
                              disabled
                    />
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <el-input v-model="authorinfo.email" disabled/>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="文章" name="article">
                <el-table stripe :data="articlelist" max-height="700">
                  <el-table-column label="标题">
                    <template #default="scope">
                      <el-link type="primary" @click="toArticleDetail(scope.row.id)">{{scope.row.title}}</el-link>
                    </template>
                  </el-table-column>
                  <el-table-column label="分类">
                    <template #default="scope">
                      <el-tag v-if="scope.row.category === 1" type="primary" size="large">技术分享</el-tag>
                      <el-tag v-else-if="scope.row.category === 2" type="success" size="large">学习笔记</el-tag>
                      <el-tag v-else-if="scope.row.category === 3" type="warning" size="large">随心所写</el-tag>
                      <el-tag v-else-if="scope.row.category === 4" type="danger" size="large">剑指Offer</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="发布时间">
                    <template #default="scope">
                      <span>{{formatDate(scope.row.createtime)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="点赞数" prop="likenumber">

                  </el-table-column>
                </el-table>
              </el-tab-pane>
<!--              <el-tab-pane label="收藏" name="favorite">-->
<!--                <el-table stripe :data="favoritelist" max-height="700">-->
<!--                  <el-table-column label="标题">-->
<!--                    <template #default="scope">-->
<!--                      <el-link type="primary">{{scope.row.name}}</el-link>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="作者" prop="author">-->

<!--                  </el-table-column>-->
<!--                  <el-table-column label="分类">-->
<!--                    <template #default="scope">-->
<!--                      <el-tag v-if="scope.row.category === 1" type="primary" size="large">日常</el-tag>-->
<!--                      <el-tag v-else-if="scope.row.category === 2" type="success" size="large">代码</el-tag>-->
<!--                      <el-tag v-else-if="scope.row.category === 3" type="warning" size="large">求助</el-tag>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="收藏时间" prop="date">-->
<!--                  </el-table-column>-->
<!--                </el-table>-->
<!--              </el-tab-pane>-->
<!--              <el-tab-pane label="评论" name="comment">-->

<!--                <el-table stripe max-height="700">-->
<!--                  <el-table-column label="文章">-->
<!--                    <template #default="scope">-->
<!--                      <el-link type="primary">{{scope.row.name}}</el-link>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="评论内容">-->

<!--                  </el-table-column>-->
<!--                  <el-table-column label="发表时间">-->

<!--                  </el-table-column>-->
<!--                  <el-table-column label="操作">-->
<!--                    <template #default="scope">-->
<!--                      <el-button type="danger" :icon="Delete" circle />-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                </el-table>-->

<!--              </el-tab-pane>-->
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
    <el-aside width="10%"></el-aside>
  </el-container>

</template>

<script setup>
import {ref} from "vue"
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import {useRouter,useRoute} from 'vue-router'
import {otherArticleService} from '/src/api/Article.js'
import {otherInfoService} from '/src/api/User.js'

//tabs绑定数据
const activeName = ref('')

const articlelist = ref([])

//路由传递的值
const userid = ref()
// 作者信息
const authorinfo = ref({
  avatarurl: "",
  email: "",
  id: 0,
  nickname: "",
  signature: "",
  username: ""
})

const route = useRoute()

userid.value = route.params.id

const router = useRouter()

const toArticleDetail = (id) => {

  router.push('/details/'+id)

}
//日期格式转换
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

//获取文章列表
const getArticle = async () => {

  let id = userid.value
  console.log("获取的用户id:"+id)
  let result = await otherArticleService(id)
  articlelist.value = result.data

}

//获取文章作者信息
const getAuthor = async (userid) => {

  let result = await otherInfoService(userid)
  authorinfo.value = result.data

}

getAuthor(userid.value)
//tab切换函数
const handleTabChange = (newTab) => {

  if(newTab === 'article'){
    getArticle()
  }
  if(newTab === 'user'){

  }

}

</script>

<style scoped>



</style>